<template>
    <div>
        <el-card class="reservation-card">
            <div class="header-container">
                <span class="header-title">挂号预约</span>
            </div>
            <el-table :data="users" style="width: 100%" border>
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="医生" prop="doctor"></el-table-column>
                <el-table-column label="时间" prop="reservationTime"></el-table-column>
                <el-table-column label="科室" prop="department"></el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.state === '1' ? 'warning' : 'success'">
                            {{ scope.row.state === '1' ? '预约中' : '已就诊' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDelete(scope.row)">{{ scope.row.state==="1"? "取消预约":"删除"}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
  
<script>
import axios from 'axios';

export default {
    data() {
        return {
            users: [],
            name: '',
        };
    },
    computed: {
    user() {
      return this.$store.state.user;
      
    },
  },
    mounted() {
        this.getlist()
    },
    methods: {
        handleDelete(row) {
            axios.delete(`http://127.0.0.1:3000/api/addreser/${row.id}`)
                .then(response => {
                    const index = this.users.findIndex(user => user.id === row.id);
                    this.users.splice(index, 1);
                    this.$message.success(`${row.state==="1"? "取消预约退费20":"删除记录"}`);
                })
                .catch(error => {
                    console.error('Error deleting user:', error);
                    this.$message.error('删除用户时发生错误');
                });
        },
        getlist() {
            axios.get(`http://127.0.0.1:3000/api/addreser/name/${this.user.name}`)
                .then(response => {
                    this.users = response.data;
                })
                .catch(error => {
                    console.error('Error fetching users:', error);
                    this.$message.error('获取用户列表时发生错误');
                });
        },
    },
};
</script>
  
<style scoped>
.reservation-card {
    margin-bottom: 20px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.header-title {
    font-size: 18px;
    font-weight: bold;
}

.reservation-button {
    margin-right: 20px;
}
</style>
  